<template>
    <div>
        <div class="header flexbetween" v-loading.fullscreen.lock="fullscreenLoading">
            <div class="flexleft" style="flex:1">
                <div class="shutup pointer" @click="back">
                    <i class="el-icon-close" style="color: #fff;font-size: 24px;"></i>
                </div>
                <div class="margin-left1 margin-right3">
                    <img src="@/assets/img/layout/logo.png" alt="" class="logoimg">
                </div>
                <div class="title">合同详情</div>
            </div>
            <ul class="flexright" style="flex:1">
                <li class="margin-right3 pointer" style="color:#999" @click="subfn(2)"
                    v-if="dataAll.signState == 0 && dataAll.personType == 4 || dataAll.signState == 0 && dataAll.personType == 5">
                    <i class="el-icon-refresh-left"></i>
                    <span style="margin-left: 5px;">撤回</span>
                </li>
                <li class="margin-right3 pointer" style="color:#999" @click="subfn(3)"
                    v-if="dataAll.operationAuthority == 1 && dataAll.signState == 1 && dataAll.personType == 3">
                    <i class="el-icon-s-order"></i>
                    <span style="margin-left: 5px;">申请解约</span>
                </li>
                <li class="margin-right3 pointer" style="color:#999" @click="subfn(5)"
                    v-if="dataAll.operationAuthority == 1 && dataAll.signState == 3 && dataAll.personType == 3 || dataAll.operationAuthority == 1 && dataAll.signState == 3 && dataAll.personType == 5">
                    <i class="el-icon-s-release"></i>
                    <span style="margin-left: 5px;">拒绝解约</span>
                </li>
                <li class="margin-right3 pointer" style="color:#999" @click="tongyijy"
                    v-if="dataAll.operationAuthority == 1 && dataAll.signState == 3 && dataAll.personType == 3 || dataAll.operationAuthority == 1 && dataAll.signState == 3 && dataAll.personType == 5">
                    <i class="el-icon-s-claim"></i>
                    <span style="margin-left: 5px;">同意解约</span>
                </li>
                <li class="margin-right3 pointer" style="color:#999" @click="subfn(1)"
                    v-if="dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 3 || dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 5">
                    <i class="el-icon-circle-close"></i>
                    <span style="margin-left: 5px;">拒绝签署</span>
                </li>
                <li class="margin-right3 colorfff btn2 pointer"
                    v-if="specifyPosition && dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 3 || specifyPosition && dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 5"
                    @click="submitspecify">提交签署</li>
                <li class="margin-right3 colorfff btn2 pointer"
                    v-if="!specifyPosition && dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 3 || !specifyPosition && dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 5"
                    @click="submit">提交签署</li>
            </ul>
        </div>
        <div class="tuozhuaibox">
            <div style="position: relative;border-bottom: 1px solid #222;box-sizing: border-box;" :style="item.styleObj"
                v-for="(item, index) in imglist" :key="index" @drop="drop($event, item)" @dragover="allowDrop($event)">
                <!-- 骑缝章签署区 -->
                <div class="ridingSeamSeal" @drop.stop="dropseam($event)" v-if="qfshow">
                    <div class="itemposiaddress" @drop.stop="dropseam($event, ite)"
                        :style="{ top: ite.sealY + 'px', left: ite.sealX + 'px', width: ite.sealWide + 'px', height: ite.sealHigh + 'px' }"
                        v-for="ite in ridingSeamList" :key="ite.id">
                        <div class="headerseal">河南鸿纵企业管理咨询有限公司</div>
                        <div class="flexcenter">
                            <div class="contentseal">骑缝章</div>
                        </div>
                    </div>
                    <DDR v-for="(ite, ind) in seamlist" :key="ite.id" v-model="ite.transform" :beforeActive="handleActive"
                        :active="ite.active" :id="ite.id" :rotatable="false" :parent="true" :axis="axis"
                        :resizeHandler="ite.resizeHandler" @dragend="dragend($event)"
                        @dragstart="dragstartseam($event, ite)">
                        <ul class="overhidden" :class="ite.active ? 'controlfocus' : 'controlnofocus'">
                            <img :src="ite.img" alt="" style="width: 100%;height: 100%;">
                            <div class="del pointer" @click="seamlist.splice(ind, 1)">删除</div>
                        </ul>
                    </DDR>
                </div>
                <!-- 文件签署区 -->
                <div class="itemposiaddress" @drop.stop="drop($event, item, ite)"
                    :style="{ top: ite.sealY + 'px', left: ite.sealX + 'px', width: ite.sealWide + 'px', height: ite.sealHigh + 'px' }"
                    v-for="ite in item.specifyarr" :key="ite.id">
                    <div class="headerseal">河南鸿纵企业管理咨询有限公司</div>
                    <div class="flexcenter">
                        <div class="contentseal">{{ valuetext(ite.sealType) }}</div>
                    </div>
                </div>
                <DDR v-for="(ite, ind) in item.list" :key="ite.id" v-model="ite.transform" :beforeActive="handleActive"
                    :active="ite.active" :id="ite.id" :rotatable="false" :parent="true" :axis="axis"
                    :resizeHandler="ite.resizeHandler" @dragend="dragend($event)"
                    @dragstart="dragstartddr($event, ite, item)">
                    <ul class="overhidden" :class="ite.active ? 'controlfocus' : 'controlnofocus'">
                        <!-- <img :src="ite.img" alt="" :style="{ height: ite.imgheight, width: ite.imgwidth }"> -->
                        <img :src="ite.img" alt="" style="width: 100%;height: 100%;">
                        <div class="del pointer" @click="delitem(item, ind)">删除</div>
                    </ul>
                </DDR>
            </div>
        </div>
        <div class="sealriding pointer" @click="qfshow = !qfshow"
            v-if="ridingSeamList.length && dataAll.operationAuthority == 1 || !specifyPosition && dataAll.operationAuthority == 1">
            展开骑缝章
        </div>
        <div class="rightFunction ffffff">
            <div class="mainpadding ">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="任务状态" name="first">
                        <div class="flexcolumn" v-if="dataAll.signState == 0">
                            <img src="@/assets/img/template/yqssvg.svg" class="stateimg" alt="">
                            <p>签署中</p>
                        </div>
                        <div class="flexcolumn" v-if="dataAll.signState == 1">
                            <img src="@/assets/img/template/ywc.svg" class="stateimg" alt="">
                            <p>已完成</p>
                        </div>
                        <div class="flexcolumn" v-if="dataAll.signState == 2">
                            <img src="@/assets/img/template/yqssvg.svg" class="stateimg" alt="">
                            <p>拒绝签署</p>
                        </div>
                        <div class="flexcolumn" v-if="dataAll.signState == 3">
                            <img src="@/assets/img/template/yqssvg.svg" class="stateimg" alt="">
                            <p>解约中</p>
                        </div>
                        <div class="flexcolumn" v-if="dataAll.signState == 4">
                            <img src="@/assets/img/template/yqssvg.svg" class="stateimg" alt="">
                            <p>已解约</p>
                        </div>
                        <div class="flexcolumn" v-if="dataAll.signState == 5">
                            <img src="@/assets/img/template/yqssvg.svg" class="stateimg" alt="">
                            <p>拒绝解约</p>
                        </div>
                        <div class="flexcolumn" v-if="dataAll.signState == 6">
                            <img src="@/assets/img/template/ych.svg" class="stateimg" alt="">
                            <p>已撤回</p>
                        </div>
                        <div class="flexcolumn" v-if="dataAll.signState == 7">
                            <img src="@/assets/img/template/ych.svg" class="stateimg" alt="">
                            <p>已过期</p>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="我的印章" name="second"
                        v-if="dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 3 || dataAll.operationAuthority == 1 && dataAll.signState == 0 && dataAll.personType == 5">
                        <div class="flexbetween flex_wrap">
                            <div class="itemchapter flexcolumn pointer margin-top1" v-if="sealListNosh && addShouhuiShow" @click="sealapply">
                                <span style="height: 100px;font-size: 12px;line-height: 100px;">+手绘签名</span>
                            </div>
                            <div class="itemchapter flexcolumn margin-top1" v-for="item in functionlist" :key="item.id"
                                draggable="true" @dragstart="drag($event, item)">
                                <img :src="item.img" alt="" class="chapterimg">
                                <div class="tabtext hui">{{ item.name }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="任务信息" name="third">
                        <div class="tabtext margin-top2 bold">基本信息</div>
                        <el-button type="text">{{ dataAll.signStateTxt }}</el-button>
                        <div class="tabtext hui margin-top1 bold">合同名称</div>
                        <el-button type="text" style="color: #333;">{{ dataAll.signContractName }}</el-button>
                        <div class="tabtext margin-top1">时间流程详情</div>
                        <div class="margin-top2">
                            <el-timeline>
                                <el-timeline-item v-for="(activity, index) in activities" :key="index">
                                    <div class="flexbetween">
                                        <span>{{ activity.nodeTxt }}</span>
                                        <span>{{ activity.operationTime }}</span>
                                    </div>
                                    <span>{{ activity.operationName }}</span>
                                    <div class="itemqian margin-top1 flexleft" v-for="(item, inde) in activity.list"
                                        :key="inde">
                                        <div class="yuan"></div>
                                        <ul>
                                            <li>签署人</li>
                                            <li class="tabtext hui">{{ item.operationName }}</li>
                                            <li class="tabtext hui">{{ item.operationTime }}</li>
                                            <li class="tabtext hui">{{ item.reason }}</li>
                                            <el-button type="text" style="color: #1063f1">{{ item.operationStateTxt
                                            }}</el-button>
                                        </ul>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <el-dialog title="签署认证" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="mainpadding ffffff">
                <el-radio-group v-model="certification" style="margin-bottom: 30px;">
                    <el-radio-button label="phone">短信验证</el-radio-button>
                    <el-radio-button label="pass">密码验证</el-radio-button>
                </el-radio-group>
                <template v-if="certification == 'phone'">
                    <el-form :model="ruleFormRegister" :rules="rules" label-position="top" ref="ruleFormRegister"
                        label-width="200px" class="demo-ruleForm">
                        <el-form-item prop="userPhone">
                            <el-input v-model="ruleFormRegister.userPhone" disabled placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input v-model="ruleFormRegister.code" placeholder="请输入验证码">
                                <div slot="append" class="getcode pointer" @click="getCode('ruleFormRegister')">{{ codetextR
                                }}</div>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div class="flexright"><el-button type="primary"
                            @click="codeCertificat('ruleFormRegister', 0)">确定</el-button></div>
                </template>
                <template v-else>
                    <el-link type="primary" v-if="!userInfo.signPassword" style="margin: 30px 0;"
                        @click="goUser">系统监测到当前账号未设置签署密码，请前往用户中心设置签署密码<i class="el-icon-arrow-right"></i></el-link>
                    <div class="flexright" v-if="!userInfo.signPassword"><el-button type="primary"
                            @click="goUser">确定</el-button></div>
                    <el-form :model="ruleFormRegister" v-if="userInfo.signPassword" :rules="rules" label-position="top"
                        ref="ruleFormRegister" label-width="200px" class="demo-ruleForm">
                        <el-form-item prop="password">
                            <el-input type="password" v-model="ruleFormRegister.password"
                                placeholder="请输入您的签署密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="flexright" v-if="userInfo.signPassword"><el-button type="primary"
                            @click="codeCertificat('ruleFormRegister', 1)">确定</el-button></div>
                </template>
            </div>
        </el-dialog>
        <el-dialog :title="titletext" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose">
            <div class="mainpadding ffffff">
                <el-form :model="ruleFormRegister" :rules="rules" label-position="top" ref="ruleFormRegister"
                    label-width="200px" class="demo-ruleForm">
                    <el-form-item prop="reason">
                        <el-input type="textarea" v-model="ruleFormRegister.reason" :placeholder="'请输入' + titletext + '原因'"
                            maxlength="200" show-word-limit></el-input>
                    </el-form-item>
                </el-form>
                <p class="tabtext" v-show="submitevent == 2">合同撤回后系统将会退还您的鸿签次数</p>
                <p class="tabtext" v-show="submitevent == 3">如果您确定要解约，解约申请将发送至全部签署方，待签署方均同意后该合同即为解约成功。解约成功后合同将为已失效状态，否则为解约失败
                </p>
                <div class="flexright"><el-button type="primary"
                        @click="subcontent('ruleFormRegister', submitevent)">确定</el-button></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import DDR from 'yoyoo-ddr';
import 'yoyoo-ddr/dist/yoyoo-ddr.css';
import {
    hasUserSealJurisdiction,
    sealContractSigning,
    contractSigningProcess,
    contractSigningAuth,
    refuseContractSigning,
    refuseRelieveContractSigningRequest,
    agreeRelieveContractSigningRequest,
    relieveContractSigningRequest,
    withdrawContractSigningRequest,
    useSealJurisdictionRequest
} from "@/api/work"
import { getSmsCode } from '@/api/index'

import Cookies from "js-cookie";
export default {
    components: { DDR },
    data() {
        return {
            ruleFormRegister: {
                userPhone: "",
                code: "",
                password: "",
                reason: "",
            },
            rules: {
                userPhone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '签署密码不能为空', trigger: 'blur' }
                ],
                reason: [
                    { required: true, message: '输入内容不能为空', trigger: 'blur' }
                ]
            },
            flag: true,
            flagR: true,
            dialogVisible: false,//签署认证对话框
            dialogVisibles: false,
            certification: "phone",//1短信验证,2密码验证
            codetext: "获取验证码",//获取验证码
            codetextR: "获取验证码",

            qfshow: false,
            specifyPosition: false,//是否指定位置
            activeName: "first",//右侧tabs
            functionlist: [],//印章列表
            dragitem: {},//拖拽地当前对象
            generateid: 0,//生成id计数flag
            generateid2: 0,
            activeid: "",
            activities: [],
            imglist: [],
            checkseals: [],
            list: [],//控件列表
            listmsg: {},
            ridingSeamList: [],//骑缝章指定位置列表
            seamlist: [],//骑缝章内容
            fileHigh: "",//文件高度
            fileWide: "1100",//文件宽度
            dataAll: {},//合同信息
            userInfo: {},//用户信息
            paramsData: {},//给后端传的接口数据
            submitevent: 0,//0提交签署，1拒绝签署，2撤销，3申请解约，4同意解约，5拒绝解约
            fullscreenLoading: true,
            sealListNosh: false,//印章列表有没有手绘印章
            addShouhuiShow: false,//指定位置需要盖章的地方是否存在手绘印章区

        };
    },
    computed: {
        axis() {
            if (this.specifyPosition) {
                return ""
            } else {
                return "x,y"
            }
        },
        titletext() {
            if (this.submitevent == 1) {
                return "拒绝签署"
            } else if (this.submitevent == 2) {
                return "撤销"
            } else if (this.submitevent == 3) {
                return "申请解约"
            } else if (this.submitevent == 5) {
                return "拒绝解约"
            }
        }
    },
    mounted() {
        this.getdetail()
        this.getprocess()//合同流程
        this.getInfo()
    },
    methods: {
        getInfo() {
            this.$store.dispatch("user/getUserInfo").then(res => {
                this.userInfo = this.$store.state.user.userInfomsg//在Vuex里面获取userinfomsg数据
                this.ruleFormRegister.userPhone = this.userInfo.userPhone
            })
        },
        // 其他操作（1拒绝签署，2撤销，3申请解约，4同意解约，5拒绝解约）
        subfn(value) {
            this.submitevent = value
            this.dialogVisibles = true
        },
        // 其他操作确定提交
        subcontent(formName, value) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisibles = false
                    if (value == 1) {// 拒绝签署
                        this.returnAll()
                    } else if (value == 5) {// 拒绝解约
                        this.jujuejy()
                    } else if (value == 3) {// 申请解约
                        this.shenqingjy()
                    } else if (value == 2) {// 撤回合同
                        this.chehuiht()
                    }
                } else {
                    return false;
                }
            });
        },
        // 密码/验证码授权
        codeCertificat(formName, value) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible = false
                    let data = {
                        authContent: "",
                        authType: value,
                        signContractId: this.$route.query.id,
                    }
                    if (value == 0) {//验证码授权
                        data.authContent = this.ruleFormRegister.code
                    } else {//密码授权
                        data.authContent = this.ruleFormRegister.password
                    }
                    contractSigningAuth(data).then(res => {
                        this.ruleFormRegister.code = ""
                        this.ruleFormRegister.password = ""
                        if (res.code == 200) {
                            this.submiteAll()
                        } else {
                            this.$message.warning(res.message)
                        }
                    }).catch(err => {
                        this.$message.warning("提交失败，请重试")
                    })
                } else {
                    return false;
                }
            });
        },
        // 拒绝签署
        returnAll() {
            refuseContractSigning({
                refuseReason: this.ruleFormRegister.reason,
                signContractId: this.$route.query.id,
                userId: Cookies.get("admin_id")
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.message)
                    setTimeout(() => {
                        this.back()
                    }, 500);
                }
            })
        },
        // 撤回合同
        chehuiht() {
            withdrawContractSigningRequest({
                withdrawReason: this.ruleFormRegister.reason,
                signContractId: this.$route.query.id,
                userId: Cookies.get("admin_id")
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.message)
                    setTimeout(() => {
                        this.back()
                    }, 500);
                }
            })
        },
        // 申请解约
        shenqingjy() {
            relieveContractSigningRequest({
                relieveReason: this.ruleFormRegister.reason,
                signContractId: this.$route.query.id,
                userId: Cookies.get("admin_id")
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.message)
                    setTimeout(() => {
                        this.back()
                    }, 500);
                }
            })
        },
        // 拒绝解约
        jujuejy() {
            refuseRelieveContractSigningRequest({
                refuseReason: this.ruleFormRegister.reason,
                signContractId: this.$route.query.id,
                userId: Cookies.get("admin_id")
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.message)
                    setTimeout(() => {
                        this.back()
                    }, 500);
                }
            })
        },
        // 同意解约
        tongyijy() {
            this.$confirm('是否同意解约?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                agreeRelieveContractSigningRequest({
                    signContractId: this.$route.query.id,
                    userId: Cookies.get("admin_id")
                }).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.message)
                        setTimeout(() => {
                            this.back()
                        }, 500);
                    }
                })
            }).catch(() => {
            });

        },
        // 提交签署
        submiteAll() {
            this.fullscreenLoading = true
            sealContractSigning(this.paramsData).then(res => {
                if (res.code == 200) {
                    this.fullscreenLoading = false
                    this.$message.success(res.message)
                    setTimeout(() => {
                        this.back()
                    }, 500);
                }
            })
        },
        // 获取验证码
        getCode(formName) {
            let userPhone;
            if (formName == 'ruleFormCode') {
                userPhone = this.ruleFormCode.userPhone
                if (userPhone == '') {
                    Message({
                        message: '手机号不能为空',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                }

                let _this = this
                if (!_this.flag) return
                _this.flag = false
                getSmsCode({ userPhone }).then(res => {
                    var i = 60;
                    var timer = setInterval(function () {
                        _this.codetext = i + "秒";
                        if (i < 1) {
                            clearInterval(timer);
                            _this.flag = true
                            _this.codetext = "获取验证码";
                        } else {
                            i--;
                        }
                    }, 1000)
                    //     // console.log(res);
                })

            } else if (formName == 'ruleFormRegister') {
                userPhone = this.ruleFormRegister.userPhone
                if (userPhone == '') {
                    Message({
                        message: '手机号不能为空',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                }
                let _this = this
                if (!_this.flagR) return
                _this.flagR = false
                getSmsCode({ userPhone }).then(res => {
                    var iR = 60;
                    var timerR = setInterval(function () {
                        _this.codetextR = iR + "秒";
                        if (iR < 1) {
                            clearInterval(timerR);
                            _this.flagR = true
                            _this.codetextR = "获取验证码";
                        } else {
                            iR--;
                        }
                    }, 1000)
                    // console.log(res);
                })
            }
        },
        goUser() {
            this.$router.push({ name: 'person' }, () => { })
        },
        handleClose(done) {
            done();
        },
        // 合同流程
        getprocess() {
            contractSigningProcess({
                signContractId: this.$route.query.id,
            }).then(res => {
                this.activities = res.result.nodeList
            })
        },
        // 获取合同详情
        getdetail() {
            hasUserSealJurisdiction({
                signContractId: this.$route.query.id,
                userId: Cookies.get("admin_id")
                // signContractId: 2813,
                // userId: 951
            }).then(res => {
                if (res.code == 200) {
                    this.dataAll = res.result
                    let arr = res.result.pdf.split(",")
                    let imglist = []
                    arr.forEach((item, index) => {
                        let timer = ""
                        let img = new Image();
                        timer = setInterval(() => {
                            img.src = item
                            // 获取后台返回图片的宽高
                            if (img.height) {
                                // console.log(img.height,"999")//后台返回的图片原来的宽高
                                // console.log(img.width, "222")//后台返回的图片原来的宽高
                                let imgheight = Number(img.height) * 1100 / Number(img.width)
                                imglist.push({
                                    styleObj: {
                                        width: "1100px",
                                        widthmode: "1100",
                                        heightmode: imgheight,
                                        height: imgheight + "px",
                                        backgroundImage: `url('${item}')`,
                                        backgroundSize: `100%,${imgheight}px`,
                                        backgroundRepeat: "no-repeat",
                                    },
                                    specifyarr: [],//指定位置
                                    list: []//控件内容
                                })
                                clearInterval(timer);
                                timer = null;
                                if (index == arr.length - 1) {
                                    if (res.result.sealIndexList.length && res.result.signState == 0 && res.result.operationAuthority == 1) {//指定位置，判断指定位置数组是否有数据，并且签署状态须为签署中signState0签署中，1完成且需要有操作权限operationAuthority=1有权限0无权限
                                        this.getspec(res.result, imglist)
                                        this.specifyPosition = true
                                    } else {//非指定位置
                                        this.addShouhuiShow = true
                                        this.specifyPosition = false
                                        this.fileHigh = imgheight
                                        this.imglist = imglist
                                    }
                                }
                            }
                        }, 1)
                    })
                    if (res.result.signState == 0) {
                        // 印章列表
                        let sealList = []
                        let num = 0
                        res.result.sealList.forEach(item => {
                            if (item.sealType == 1) {
                                num = num + 1
                            }
                            sealList.push({
                                img: item.img,
                                resizeHandler: [],
                                contentValue: item.saleTypeName,
                                transform: { width: 200, height: 200, rotation: 0, x: 100, y: 100 },
                                name: item.saleTypeName,
                                id: item.sealId,
                                item: item
                            })
                        })
                        if (num == 0) {
                            this.sealListNosh = true
                        }
                        this.functionlist = JSON.parse(JSON.stringify(sealList))
                    }

                } else if (res.code == 405) {
                    this.$message.warning("签署企业未注册，请先完成注册！")
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 500)
                } else if (res.code == 406) {
                    this.$message.warning("签署企业未认证，请联系企业管理员完成认证！")
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 500)
                } else if (res.code == 407) {
                    this.$message.warning("经办人不归属签署企业，请申请加入后签署！")
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 500)
                }
                this.fullscreenLoading = false
            })
        },
        // 指定位置签署赋值
        getspec(result, imglist) {
            imglist.forEach((item, index) => {
                result.sealIndexList.forEach(ite => {
                    let num = Number(item.styleObj.heightmode) / Number(ite.fileHigh)
                    if (index + 1 == ite.pageNum) {
                        if (ite.sealType == 1 || ite.sealType == -1) {
                            this.addShouhuiShow = true
                        }
                        item.specifyarr.push({
                            id: ite.id,//指定位置id
                            sealX: Number(ite.sealX) * num,
                            sealY: Number(ite.sealY) * num,
                            sealType: ite.sealType,//-1手绘模板，1手绘，2模板，3企业，5法人
                            sealImg: "",//章图片
                            sealId: "",//章id
                            sealWide: this.valuebox(ite.sealType),//章宽
                            sealHigh: this.valuebox(ite.sealType),//章高
                        })
                    }
                    // 骑缝章指定位置赋值
                    if (ite.pageNum == "-1") {
                        this.ridingSeamList.push({
                            id: ite.id,//指定位置id
                            sealX: Number(ite.sealX) * num,
                            sealY: Number(ite.sealY) * num,
                            sealType: ite.sealType,//-1手绘模板，1手绘，2模板，3企业，5法人
                            fileHigh: item.styleObj.heightmode,//图片高度
                            fileWide: item.styleObj.widthmode,//图片宽度
                            sealImg: "",//章图片
                            sealId: "",//章id
                            sealWide: 272,//章宽
                            sealHigh: 275,//章高
                        })
                    }
                })
            })
            this.imglist = imglist
        },
        valuebox(value) {
            if (value == "-1" || value == 1 || value == 2 || value == 5) {
                return 110
            } else {
                return 275
            }
        },
        valuetext(value) {
            if (value == "-1") {
                return "手绘/个人章"
            } else if (value == 1) {
                return "手绘"
            } else if (value == 2) {
                return "个人章"
            } else if (value == 3) {
                return "企业章"
            } else if (value == 5) {
                return "法人章"
            }
        },
        // 左边拖拽事件
        drag(e, item) {
            this.dragitem = item
        },
        // 允许放下拖拽
        allowDrop(ev) {
            ev.preventDefault();
        },
        // 禁止放下拖拽
        noallowDrop(ev) {
            ev.returnValue = false;
        },
        // 骑缝章放下
        dropseam(ev, item) {
            ev.preventDefault();
            let arr = JSON.parse(JSON.stringify(this.seamlist))
            arr.forEach(current => {
                current.active = false
            })
            this.generateid2 = arr.length
            // 指定位置签署
            if (this.specifyPosition) {
                let transform = { x: item.sealX, y: item.sealY, width: item.sealWide, height: item.sealHigh, rotation: 0, }
                arr.push({
                    id: this.generateid2 + 1 + "s",//id数据
                    active: true, //控件选中状态
                    transform: transform,
                    controlName: this.dragitem.name,//控件名称
                    content: "",//控件内容
                    contentValue: this.dragitem.contentValue,//控件值
                    resizeHandler: this.dragitem.resizeHandler,//允许拖拽的方向
                    parentid: this.dragitem.id,//章id
                    img: this.dragitem.img,//印章图片
                    item: this.dragitem.item,//当前印章的全部信息
                    require: true,
                    fileHigh: item.fileHigh,
                    fileWide: item.fileWide,
                    signatoryCoordinateId: item.id//指定位置id
                })
            } else {
                let transform = { x: 0, y: ev.offsetY, width: 275, height: 275, rotation: 0, }
                arr.push({
                    id: this.generateid2 + 1 + "s",//id数据
                    active: true, //控件选中状态
                    transform: transform,
                    controlName: this.dragitem.name,//控件名称
                    content: "",//控件内容
                    contentValue: this.dragitem.contentValue,//控件值
                    resizeHandler: this.dragitem.resizeHandler,//允许拖拽的方向
                    parentid: this.dragitem.id,//章id
                    img: this.dragitem.img,//印章图片
                    item: this.dragitem.item,//当前印章的全部信息
                    require: true,
                    fileHigh: this.fileHigh,
                    fileWide: this.fileWide,
                    signatoryCoordinateId: ""//指定位置id
                })
            }
            this.seamlist = JSON.parse(JSON.stringify(arr))
            this.dragitem = {}
        },
        // 放下事件
        drop(ev, item, ite) {
            // console.log(ev, "拖动放下位置");
            // console.log(item, "拖动的当前对象");
            // console.log(this.dragitem, "被拖动的印章");
            console.log(this.dragitem.item.sealType, "被拖动的印章");
            // console.log(ite.sealType, "被拖动的印章");
            // console.log(ite, "拖动到的当前specifyarr");
            ev.preventDefault();
            let arr = JSON.parse(JSON.stringify(item.list))
            arr.forEach(current => {
                current.active = false
            })
            this.generateid = arr.length
            // 指定位置签署
            if (this.specifyPosition) {
                if (this.dragitem.item.sealType != ite.sealType) {
                    let sealtext = this.valuetext(ite.sealType)
                    if (this.dragitem.item.sealType == 1 && ite.sealType != "-1" || this.dragitem.item.sealType == 2 && ite.sealType != "-1") {
                        this.$message.warning("请在此位置签署" + sealtext)
                        return false
                    }
                }
                item.specifyarr.forEach(current => {
                    if (current.id == ite.id) {
                        let transform = { x: current.sealX, y: current.sealY, width: current.sealWide, height: current.sealHigh, rotation: 0, }
                        arr.push(
                            {
                                id: this.generateid + 1,//id数据
                                active: true, //控件选中状态
                                transform: transform,
                                controlName: this.dragitem.name,//控件名称
                                content: "",//控件内容
                                contentValue: this.dragitem.contentValue,//控件值
                                resizeHandler: this.dragitem.resizeHandler,//允许拖拽的方向
                                parentid: this.dragitem.id,//章id
                                img: this.dragitem.img,//印章图片
                                item: this.dragitem.item,//当前印章的全部信息
                                require: true,
                                // imgheight:current.sealHigh+"px",//印章图片高度
                                // imgwidth: current.sealWide + "px"//印章图片宽度
                                // imgheight: 275 + "px",//印章图片高度
                                // imgwidth: 275 + "px",//印章图片宽度
                                signatoryCoordinateId: current.id//指定位置id
                            })
                        item.list = JSON.parse(JSON.stringify(arr))
                        this.dragitem = {}
                    }
                })
            } else {
                // console.log(123)
                this.checkseals.push(this.dragitem)
                this.checkseals = Array.from(new Set(this.checkseals))
                let transform = { x: ev.offsetX, y: ev.offsetY, width: this.valuebox(this.dragitem.item.sealType), height: this.valuebox(this.dragitem.item.sealType), rotation: 0, }
                arr.push(
                    {
                        id: this.generateid + 1,//id数据
                        active: true, //控件选中状态
                        transform: transform,
                        controlName: this.dragitem.name,//控件名称
                        content: "",//控件内容
                        contentValue: this.dragitem.contentValue,//控件值
                        resizeHandler: this.dragitem.resizeHandler,//允许拖拽的方向
                        parentid: this.dragitem.id,//章id
                        img: this.dragitem.img,//印章图片
                        item: this.dragitem.item,//当前印章的全部信息
                        require: true,
                        // imgheight:current.sealHigh+"px",//印章图片高度
                        // imgwidth: current.sealWide + "px"//印章图片宽度
                        // imgheight: 275 + "px",//印章图片高度
                        // imgwidth: 275 + "px",//印章图片宽度
                        // signatoryCoordinateId: current.id//指定位置id
                    })
                item.list = JSON.parse(JSON.stringify(arr))
                this.dragitem = {}
            }
        },
        // 删除
        delitem(item, ind) {
            console.log(item, "999");
            this.checkseals.forEach((current, index) => {
                if (item.list[ind].item.sealId == current.id) {
                    this.checkseals.splice(index, 1)
                }
            })
            item.list.splice(ind, 1)
            console.log(this.checkseals, "去重666");
        },
        // 指定位置提交签署
        submitspecify() {
            // console.log(this.imglist, "999");
            // console.log(this.ridingSeamList.length,"999");
            // console.log(this.seamlist.length, "888");
            let data = {
                contractSignId: this.$route.query.id,
                userId: Cookies.get("admin_id"),
                sealIndexParamList: "",
            }
            let jurisdiction = 0//是否需要用印申请，0不需要，1需要
            let sealIndexParamList = []
            let flag = true//标识，判断所有章是否盖章完毕
            this.imglist.forEach((item, index) => {
                if (item.list.length != 0) {
                    item.list.forEach(ite => {
                        if (ite.item.jurisdiction == 0) {
                            jurisdiction = 1
                        }
                        sealIndexParamList.push({
                            fileHigh: Number(item.styleObj.heightmode).toFixed(0),//文件图片高度
                            fileWide: Number(item.styleObj.widthmode),//文件图片宽度
                            sealY: Number(ite.transform.y).toFixed(0),//章y坐标
                            sealX: Number(ite.transform.x).toFixed(0),//章x坐标
                            pageNum: Number(index) + 1,//第几页（下标）的章
                            sealHigh: ite.transform.height,//印章高度
                            sealWide: ite.transform.width,//印章宽度
                            sealId: ite.item.sealId,//印章id
                            sealImg: ite.item.img,//印章图片
                            sealMode: 0,//               盖章方式：0签章，1骑缝章
                            sealType: ite.item.sealType,//印章类型
                            signatoryCoordinateId: ite.signatoryCoordinateId,//指定位置id
                            isNeedRequest: ite.item.jurisdiction ? 0 : 1//是否需要用印申请 0-否 1-是
                        })
                    })
                }
                if (item.specifyarr.length != item.list.length) {
                    flag = false
                }
            })
            if (this.seamlist.length != 0) {
                this.seamlist.forEach(item => {
                    if (item.item.jurisdiction == 0) {
                        jurisdiction = 1
                    }
                    sealIndexParamList.push({
                        fileHigh: Number(item.fileHigh).toFixed(0),//文件图片高度
                        fileWide: Number(item.fileWide),//文件图片宽度
                        sealY: Number(item.transform.y).toFixed(0),//章y坐标
                        sealX: Number(item.transform.x).toFixed(0),//章x坐标
                        pageNum: "-1",//第几页（下标）的章
                        sealHigh: item.transform.height,//印章高度
                        sealWide: item.transform.width,//印章宽度
                        sealId: item.item.sealId,//印章id
                        sealImg: item.item.img,//印章图片
                        sealMode: 1,//               盖章方式：0签章，1骑缝章
                        sealType: item.item.sealType,//印章类型
                        signatoryCoordinateId: item.signatoryCoordinateId,//指定位置id
                        isNeedRequest: item.item.jurisdiction ? 0 : 1//是否需要用印申请 0-否 1-是
                    })
                })
            }
            if (!flag) {
                this.$message.warning("请将合同内所有需盖章地方签署完成！")
                return false
            }
            // if (this.ridingSeamList.length != this.seamlist.length) {
            //     this.$message.warning("请将骑缝章签署完毕在进行提交！")
            //     return false
            // }
            if (jurisdiction == 1) {
                data.sealIndexParamList = sealIndexParamList
                this.paramsData = data
                this.yongyinsq()
            } else {
                data.sealIndexParamList = JSON.stringify(sealIndexParamList)
                this.paramsData = data
                this.dialogVisible = true
            }
        },
        // 非指定位置签署提交
        submit() {
            console.log(this.checkseals, "发送给后台的参数信息");
            if (this.checkseals.length == 0) {
                this.$message.warning("请签署后提交！")
                return
            }
            // if (this.functionlist.length != this.checkseals.length) {
            //     let num1 = 0
            //     let num2 = 0
            //     this.functionlist.forEach(current => {
            //         if (current.item.sealType == "-1" || current.item.sealType == 1 || current.item.sealType == 2 || current.item.sealType == 5) {
            //             num1 = num1 + 1
            //         }
            //     })
            //     this.checkseals.forEach(item => {
            //         if (item.item.sealType == "-1" || item.item.sealType == 1 || item.item.sealType == 2 || item.item.sealType == 5) {
            //             num2 = num2 + 1
            //         }
            //     })
            //     if (num1 && !num2 || !num1 && !num2 || num1 && num2) {
            //         console.log(num1, num2);
            //         this.$message.warning("您至少还有一个需签署的印章未签署，请签署后提交！")
            //         return false
            //     }
            // }
            let data = {
                contractSignId: this.$route.query.id,
                userId: Cookies.get("admin_id"),
                sealIndexParamList: "",
                // contractSignId: 2813,
                // userId: 951
            }
            let jurisdiction = 0//是否需要用印申请，0不需要，1需要
            let sealIndexParamList = []
            this.imglist.forEach((item, index) => {
                if (item.list.length != 0) {
                    item.list.forEach(ite => {
                        if (ite.item.jurisdiction == 0) {
                            jurisdiction = 1
                        }
                        sealIndexParamList.push({
                            fileHigh: Number(item.styleObj.heightmode).toFixed(0),//文件图片高度
                            fileWide: Number(item.styleObj.widthmode),//文件图片宽度
                            sealY: Number(ite.transform.y).toFixed(0),//章y坐标
                            sealX: Number(ite.transform.x).toFixed(0),//章x坐标
                            pageNum: Number(index) + 1,//第几页（下标）的章
                            sealHigh: ite.transform.height,//印章高度
                            sealWide: ite.transform.width,//印章宽度
                            sealId: ite.item.sealId,//印章id
                            sealImg: ite.item.img,//印章图片
                            sealMode: 0,//               盖章方式：0签章，1骑缝章
                            sealType: ite.item.sealType,//印章类型
                            isNeedRequest: ite.item.jurisdiction ? 0 : 1//是否需要用印申请 0-否 1-是
                        })
                    })
                }
            })
            if (this.seamlist.length != 0) {
                this.seamlist.forEach(item => {
                    if (item.item.jurisdiction == 0) {
                        jurisdiction = 1
                    }
                    sealIndexParamList.push({
                        fileHigh: Number(item.fileHigh).toFixed(0),//文件图片高度
                        fileWide: Number(item.fileWide),//文件图片宽度
                        sealY: Number(item.transform.y).toFixed(0),//章y坐标
                        sealX: 0,//章x坐标
                        pageNum: "-1",//第几页（下标）的章
                        sealHigh: item.transform.height,//印章高度
                        sealWide: item.transform.width,//印章宽度
                        sealId: item.item.sealId,//印章id
                        sealImg: item.item.img,//印章图片
                        sealMode: 1,//               盖章方式：0签章，1骑缝章
                        sealType: item.item.sealType,//印章类型
                        isNeedRequest: item.item.jurisdiction ? 0 : 1//是否需要用印申请 0-否 1-是
                    })
                })
            }
            if (jurisdiction == 1) {
                data.sealIndexParamList = sealIndexParamList
                this.paramsData = data
                this.yongyinsq()
            } else {
                data.sealIndexParamList = JSON.stringify(sealIndexParamList)
                this.paramsData = data
                this.dialogVisible = true
            }
            this.submitevent = 0

        },
        // 用印申请
        yongyinsq() {
            this.$confirm('系统检测到您当前暂无用印权限，发起用印权限申请成功之后可直接签署成功，是否发起？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.fullscreenLoading = true
                useSealJurisdictionRequest(this.paramsData).then(res => {
                    if (res.code == 200) {
                        this.fullscreenLoading = false
                        this.$message.success(res.message)
                        setTimeout(() => {
                            this.back()
                        }, 500);
                    }
                })
            }).catch(() => {
            });

        },
        handleActive(id) {
            // 如果active属性和该函数的返回值都为false时，组件不会响应鼠标操作
            // 将数组内对应id的数据同步为true
            this.list = this.list.map((item) => {
                if (item.id === id) {
                    item = { ...item, active: true };
                } else if (item.active) {
                    item = { ...item, active: false };
                }
                return item;
            });
            return true;
        },
        // 骑缝章控件内拖动开始事件
        dragstartseam(e, ite) {
            this.seamlist.forEach(current => {
                current.active = false
            })
            ite.active = true
        },
        // 控件内拖动开始事件
        dragstartddr(e, ite, item) {
            console.log(ite, "拖动前数据信息")
            console.log(item, "拖动前数据信息")
            console.log(e, "拖动前数据信息")
            item.list.forEach(current => {
                current.active = false
            })
            ite.active = true
        },
        dragend(e,) {
            console.log(e, "拖动结束数据信息")
        },
        back() {
            this.$router.go(-1)
        },
        // 印章申请
        sealapply() {
            this.$router.push({ path: "/admin/addSealAdmin", query: { type: 1 } }, () => { })
        },
    },
};
</script>

<style lang="scss" scoped>
.stateimg {
    width: 100px;
    height: 100px;
    margin: 20px 0;
}

.sealriding {
    width: 16px;
    position: absolute;
    right: 310px;
    top: 50%;
    color: #f50103;
    user-select: none;
}

// .sealriding:hover{
//     color: #1063f1;

// }
.ridingSeamSeal {
    width: 275px;
    height: 100%;
    position: absolute;
    right: -270px;
    top: 0;
    border: 1px dashed rgba(16, 99, 241, .1);
    box-sizing: border-box;
    background-color: #fff;
    background-image: url("@/assets/img/template/sy.png");
    background-size: 150px 150px;
}

.itemposiaddress {
    position: absolute;
    border: 1px solid #e61717;
    background-color: rgba(242, 235, 234, .7);
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
}

.headerseal {
    background-color: #e61717;
    color: #fff;
    font-size: 12px;
    text-align: center;
    height: 18px;
    flex: 1;
}

.flexcenter {
    flex: 15;

}

.contentseal {
    // height: 180px;
    font-size: 12px;
    margin: auto;

}

.yuan {
    width: 10px;
    height: 10px;
    background-color: #1063f1;
    border-radius: 50%;
}

.itemqian {
    background-color: #fafafa;
    padding: 5px;
    border-radius: 5px;
}

.del {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    color: #555;
    font-size: 16px;
    background-color: rgba(153, 153, 153, .7);
    position: absolute;
    bottom: 0;
}

.itemchapter {
    width: 48%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 10px;
    box-sizing: border-box;
}

.chapterimg {
    width: 100px;
}

.yuan {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
}

.lan {
    background-color: #1063f1;
}

.huang {
    background-color: #ffa126;
}

.overhidden {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    line-height: 30px;
    position: relative;
}

.itemcontrol {
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
}

.controlfocus {
    border: 1px dashed #1063f1;
    background-color: rgba(16, 99, 241, .1);
}

.controlnofocus {
    border: 1px dashed #999;
    background-color: rgba(153, 153, 153, .1);
}

.contentbox {
    // padding: 100px 0 0;
    position: relative;
}

.contentbox2 {
    position: relative;
}

// 左侧样式表
.margin-bottom1 {
    margin-bottom: 10px;
}

.itembox {
    width: 25%;
}

.iconsize {
    width: 20px;
    height: 20px;
}

.leftFunction {
    position: absolute;
    left: 0;
    top: 55px;
    width: 300px;
    user-select: none;
    height: calc(100vh - 55px);
}

.rightFunction {
    position: absolute;
    right: 0;
    top: 55px;
    width: 300px;
    user-select: none;
    height: calc(100vh - 55px);
    overflow-y: scroll;
}

.rightFunction::-webkit-scrollbar {
    display: none;
}

.tuozhuaibox {
    margin-top: 30px;
    box-sizing: border-box;
    // width: calc(100vw - 800px);
    width: 1375px;
    // height: 1556px;
    height: calc(100vh - 85px);
    // border: 1px solid #ffa126;
    position: absolute;
    overflow-y: scroll;
    left: 100px;
    top: 55px;
    user-select: none;
}

.tuozhuaibox::-webkit-scrollbar {
    display: none;
}

// 头部样式内容
.btn1 {
    padding: 3px 13px;
    border: 1px solid #fff;
    border-radius: 3px;
}

.btn2 {
    padding: 3px 13px;
    border: 1px solid #1063f1;
    border-radius: 3px;
    background-color: #1063f1;
}

.title {
    color: #fff;
    padding: 0 30px;
    border-left: 1px solid #fff;
    font-size: 20px;
}

.shutup {
    background-color: #3b4049;
    padding: 15px 20px;
}

.cicle {
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 50%;
    line-height: 30px;
    background-color: #4e5969;
    text-align: center;
}

.focus {
    background-color: #fff;
}

.colorhui {
    color: #999;
}

.toptext {
    font-size: 14px;
}

.colorfff {
    color: #fff;
}

.fgline {
    width: 35px;
    height: 2px;
    background-color: #fff;
}

.header {
    background-color: #262729;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

.logoimg {
    width: 110px;
    height: 28px;
    margin-top: 5px;
}

// 头部样式内容结束
</style>
<style  lang="scss">
.yoyoo-ddr {
    box-sizing: border-box !important;
}

.el-textarea__inner {
    min-height: 150px !important;
}

.leftFunction .el-collapse-item__wrap,
.el-collapse-item__header {
    border: none;
}

.leftFunction .el-collapse {
    border: none;
}

.rightFunction .el-collapse {
    border: none;
}

.rightFunction .el-collapse-item__wrap,
.el-collapse-item__header {
    border: none;
}

.el-tabs__content {
    overflow: initial;
}
</style>